<template>
  <div class="luntan">
     <div>
       <div>
          <tab :line-width=2 active-color='#fc378c' v-model="index">
            <tab-item class="vux-center" @on-item-click="handler" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
          </tab>
      </div>
     </div>
     <div v-if="show1 === list2[index]" style="position: relative;margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
         <group  :title="'Tap大佬'+' ：' + toupai.uid" style="color:red">
            <x-input v-model="BiaoTi" :placeholder="$t('标题')" style="color:black;font-weight:800"></x-input>
            <x-textarea v-model="content" style="font-size:14px" :max="200" :height="200" name="description" :placeholder="$t('内容')"></x-textarea>
            <p style="padding:8px 0;overflow: hidden;background: wheat;">
               <button style="margin-right:15px;float:left;border:none; box-shadow: -1px -1px 5px #aaa;font-size:15px;background: #12a7b4;color:wheat" @click="FaBiao">发表</button>
               <input name="photo" accept="/static/" multiple style="float:left;border:none;font-size:12px;width:125px;display:none" type="file">
               <span class="tupian" style="font-size:14px;background: #12a7b4;color:wheat;padding:2px 2px;">图片</span>
               <span style="margin-right:5px;float:right;">
                   <img style="width:25px;box-shadow: -1px -1px 5px #aaa;" :src="'/static/'+toupai.gimg+'png'" alt="">
                   <span style="font-size:12px;">{{toupai.gname}}</span>
               </span>
            </p>
          </group>
          <section style="position: absolute;bottom:52px;"></section>
     </div>
     <div v-if="show2 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
       <div style="height:100%;margin-top:15px">
         <divider>
           <h4 style="font-size:16px;color:#12a7b4">官方论坛</h4>
         </divider>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:11px">
           <a href="">
             <img style="width:50%;border-radius: 50%" src="/static/11.png" alt="">
             <p>发现好游戏</p>
           </a>
         </p>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:11px">
           <a href="">
             <img style="width:50%;border-radius: 50%" src="/static/12.jpg" alt="">
             <p>ios游戏</p>
           </a>
         </p>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:8px">
            <a href="">
              <img style="width:50%;border-radius: 50%" src="/static/13.jpg" alt="">
              <p>音乐|文学</p>
            </a>
         </p>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:11px">
            <a href="">
              <img style="width:50%;border-radius: 50%" src="/static/14.png" alt="">
              <p>日系游戏</p>
            </a>
         </p>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:11px">
           <a href="">
             <img style="width:50%;border-radius: 50%" src="/static/15.jpg" alt="">
             <p>动漫手绘</p>
           </a>
         </p>
         <p style="text-align: center;float:left;width:30%;height:70px;margin-right:8px">
           <a href="">
             <img style="width:50%;border-radius: 50%" src="/static/11.png" alt="">
            <p> VR | AR</p>
           </a>
         </p>
       </div>
     </div >
     <div v-if="show3 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
         <div style="">
          <divider>{{ $t('等待开发1')}}</divider>
         </div>
     </div>
     <div v-if="show4 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
         <div style="">
          <divider>{{ $t('等待开发2')}}</divider>
         </div>
     </div>
     <div v-if="show5 === list2[index]" style="margin:1% auto; box-shadow: -1px -1px 5px #aaa;;width:95%;">
         <div style="">
          <divider>{{ $t('等待开发3')}}</divider>
         </div>
     </div>
     <!-- ============== -->
     <div style="">
          <divider>{{ $t('底部')}}</divider>
     </div>
  </div>
</template>
<script>
import { Divider, Tab, TabItem, XTextarea, Group, XInput } from "vux";
const list = () => ["论坛", "版块", "排行", "安利", "个人"];
export default {
  components: {
    Tab,
    TabItem,
    XTextarea,
    Group,
    XInput,
    Divider
  },
  data() {
    return {
      list2: list(),
      demo2: "美食",
      index: 0,
      show1: "论坛",
      show2: "版块",
      show3: "排行",
      show4: "安利",
      show5: "个人",
      toupai: {},
      style1: {
        color: "red"
      },
      BiaoTi: "",
      content: "",
      tuoainss: ""
    };
  },
  methods: {
    handler: function() {
      console.log(this.list2[this.index]);
    },
    onEvent(event) {
      console.log("on", event);
    },
    FaBiao: function(ev) {
      ev.preventDefault();
      var ids = this.$route.params;
      console.log(this.BiaoTi);
      console.log(this.content);
      console.log(ids);
      this.$axios
        .post("/top/wenzhang", {
          BiaoTi: this.BiaoTi,
          content: this.content,
          gameid: ids
        })
        .then(data => {
          console.log(data);
          if (data.data.error == 2) {
            alert(data.data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
    // tupianshangchuan: function() {
    //   var that = this;
    //   $(":file").on("change", function() {
    //     var files = this.files;
    //     // 拼接字符串
    //     var html = "";
    //     for (var i = 0; i < files.length; i++) {
    //       var file = files[i];
    //       console.log(URL.createObjectURL(file));
    //       // that.tuoainss.push(URL.createObjectURL(file))
    //       html += "<img src=" + URL.createObjectURL(file) + ">";
    //     }
    //     $("section").append(html);
    //   });
    // }
  },
  mounted: function() {
    var ids = this.$route.params;
    var that = this;
    // console.log(ids);
    this.$axios
      .post("/top/luntan", {
        Gid: ids
      })
      .then(data => {
        if (data.data.error == 1) {
          alert("请登录，才可以发送评论哟");
          location.href = "#/denglu";
        }
        if (data.data.error == 2) {
          alert("厂商倒闭，黄鹤跑了");
        }
        // console.log(data.data.data);
        var datas = data.data.data;
        that.toupai = datas;
        //   datas.uid + "对" + datas.gname + "/static/" + datas.gimg + "png";
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";
.luntan {
  background: white;
  margin-top: 85px;
  // border-radius: 
}

</style>

